<script lang="ts" setup>
import { ref, h, onBeforeMount, nextTick, reactive } from "vue";
import {
  VxeFormPropTypes,
  VxeFormInstance,
  VxeModalInstance,
  VxeFormProps
} from "vxe-pc-ui";
import { editStatus } from '@/api/project/project'
const emits = defineEmits<{ (e: "reload"): void }>();
const vxeModalRef = ref<VxeModalInstance>();

const modalOptions = reactive<{
  modalValue: boolean;
  modalTitle: string;
  canSubmit: boolean;
}>({
  modalValue: false,
  modalTitle: "",
  canSubmit: true
});

const showModal = (title: string, canSubmit?: boolean): void => {
  modalOptions.modalTitle = title;
  modalOptions.modalValue = true;
  modalOptions.canSubmit = canSubmit ?? true;
};
const defaultFormData = () => {
  return {
    remark: '',
    id: '',
    auditState: 2
  };
};
// 筛选相关
const formRef = ref<VxeFormInstance>();
interface FormDataVO {
  remark: string;//项目名称
  id: number | string;
  auditState: number | string;
}

const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    remark: '',
    id: '',
    auditState: 2
  },
  items: [
    {
      field: "remark",
      title: "备注",
      span: 24,
      itemRender: {},
      slots: { default: "remark" }
    }
  ]
});
const formRules = ref<VxeFormPropTypes.Rules>({
  merchantsInfoId: [{ required: true, message: "请选择商户",trigger: 'change' }],
  taxSourcesId: [{ required: true, message: "请选择税源地",trigger: 'change' }],
  invoiceTypeIdList: [{ required: true, message: "请选择开票类目",trigger: 'change' }],
  projectName: [{ required: true, message: "请输入项目名称",trigger: 'change' }],
  projectContent: [{ required: true, message: "请输入项目内容",trigger: 'change' }],
  projectSettlementRules: [{ required: true, message: "请输入费用规则",trigger: 'change' }],
  projectLocation: [{ required: true, message: "请输入项目地点",trigger: 'change' }],
});

const showAddModal = (record: Recordable) => {
  showModal(`驳回`);
  formOptions.data = defaultFormData();
  nextTick(() => {
    formRef.value.clearValidate();
    formOptions.data.id = record.id
  });
};
const showEditModal = (record: Recordable) => {
  showModal(`编辑开票类目`);
  nextTick(() => {
    formRef.value.clearValidate();
    
    
  });
};
const showViewModal = (record: Recordable) => {
  showModal(`查看详情`,false);
  nextTick(() => {
    formRef.value.clearValidate();
    
  });
}
const handleSubmit = async () => {
  const validate = await formRef.value.validate();
  if (!validate) {
    changeState(formOptions.data);
  }
};

const changeState = (params:any) => {
  editStatus(params).then(res => {
    modalOptions.modalValue = false;
    emits("reload");
  })
}
onBeforeMount(() => {
  
});
defineExpose({ showAddModal,showEditModal,showViewModal });
</script>
<template>
  <vxe-modal
    ref="vxeModalRef"
    v-model="modalOptions.modalValue"
    width="800"
    showFooter
    :title="modalOptions.modalTitle"
  >
    <template #default>
      <vxe-form
        ref="formRef"
        :titleWidth="120"
        :titleAlign="`right`"
        :rules="formRules"
        v-bind="formOptions"
      >
        <template #remark="{ data }">
          <el-input
            clearable
            type="textarea"
            placeholder="请输入备注"
            v-model="data.remark"
          ></el-input>
        </template>
      </vxe-form>
    </template>
    <template #footer>
      <vxe-button content="关闭" @click="modalOptions.modalValue = false" />
      <vxe-button
        v-if="modalOptions.canSubmit"
        status="primary"
        content="确定"
        @click="handleSubmit"
      />
    </template>
  </vxe-modal>
</template>
<style>
.img_one{
  position: relative;
}
.icon-check{
  position: absolute;
  width: 100%;height: 100%;
  left: 0;
  top: 0;
  line-height: 48px;
  text-align: center;
}



.avatar-uploader .el-upload {
  border: 1px dashed #eee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: #eee;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
}
</style>